/*
 * @Author: 尹书延
 * @Date: 2021-11-23 19:07:54
 * @LastEditTime: 2021-11-29 14:32:56
 */
(() => {
  const createBtn = (props?: any) => {
    const btn = document.createElement('div');
    btn.className = 'btn';
    if (typeof props === 'object') {
      for (const prop in props) {
        btn[prop] = props[prop];
      }
    }
    return btn;
  };
  const bind2CSSProp = (
    container: HTMLElement,
    propName: string,
    value: string
  ) => {
    container.style.setProperty(propName, value);
  };
  const btnCount = 48;
  const layouts = ['lg', 'md', 'sm', 'xs'];
  const inputs = [
    // { name: 'wid', suffix: 'px' },
    { name: 'col', suffix: '' },
    { name: 'gap', suffix: 'px' },
  ];
  const container = document.getElementById('flex-container');
  // 创建按钮
  for (let i = 0; i < btnCount; i++) {
    container.appendChild(createBtn({ textContent: '测试用按钮' }));
  }
  // 绑定数据
  for (const layout of layouts) {
    for (const input of inputs) {
      const name = `${layout}-${input.name}`;
      const el = document.getElementById(name) as HTMLInputElement;
      if (!el) continue;
      const bindCSS = () => {
        bind2CSSProp(container, '--' + name, (el.value ?? '0') + input.suffix);
      };
      bindCSS();
      el.addEventListener('input', bindCSS);
    }
  }
  // 展示窗口宽度
  const showWindowWidth = () => {
    const winWid = window.innerWidth;
    document.getElementById('doc-width').textContent = `${winWid}px ${
      winWid >= 1400
        ? '宽屏'
        : winWid >= 1000
        ? '中屏'
        : winWid >= 700
        ? '窄屏'
        : winWid > 1
        ? '极窄屏'
        : ''
    }`;
  };
  showWindowWidth();
  window.addEventListener('resize', showWindowWidth);
  // 切换实现方式：间隙 还是 外边距
  const switcher = document.getElementById('flex-type');
  if (switcher) {
    const type = ['gap', 'margin'];
    let i = -1;
    const switchType = () => {
      container.classList.remove(type[i]);
      if (++i >= type.length) i = 0;
      switcher.textContent = type[i];
      container.classList.add(type[i]);
    };
    switchType();
    switcher.addEventListener('click', switchType);
  }
})();
